<!-- src/App.ku.vue | App.ku.vue -->

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { ConfigProviderThemeVars } from "wot-design-uni";
const theme = ref<"dark" | "light">("dark");
const setTheme = () => {
  const root = document.documentElement;
  root.setAttribute("data-theme", theme.value === "light" ? "dark" : "light");
  theme.value = theme.value === "light" ? "dark" : "light";
};
const themeVars = reactive<ConfigProviderThemeVars>({
  darkBackground2: "transparent", // 深色背景2
});
</script>

<template>
  <wd-config-provider :theme-vars="themeVars" :theme="theme">
    <!-- 顶级 KuRootView -->
    <wd-fab customStyle="top:80vh; ">
      <wd-button
        @click="setTheme"
        custom-class="custom-button"
        type="primary"
        round
      >
        {{ theme === "light" ? "黑夜模式" : "明亮模式" }}
      </wd-button>
    </wd-fab>
    <wd-notify />
    <KuRootView />
  </wd-config-provider>
</template>
